<template>
  <div class="product">
    <v-row>
      <v-col :cols="12" style="padding:0;">
        <v-carousel cycle height="400" hide-delimiter-background show-arrows-on-hover>
          <v-carousel-item v-for="(slide, i) in slides" :key="i" :src="slide"></v-carousel-item>
        </v-carousel>
      </v-col>
    </v-row>

    <v-container>
      <v-row>
        <v-col class="text-center" style="font-size:36px;" :cols="12">Royal Mavic Series</v-col>
      </v-row>

      <v-row>
        <v-col :cols="12">
          <v-card>
            <div class="d-flex flex-no-wrap justify-space-between align-center">
              <div>
                <v-card-title class="headline">Mavic Air 2</v-card-title>
                <v-card-subtitle class="body-1">48M pixel drone</v-card-subtitle>
              </div>
              <v-avatar class="ma-3" size="300" tile>
                <v-img src="../assets/1.png"></v-img>
              </v-avatar>
            </div>
          </v-card>
        </v-col>

        <v-col :cols="12" class="mt-2">
          <v-card>
            <div class="d-flex flex-no-wrap justify-space-between align-center">
              <div>
                <v-card-title class="headline">Maicv 2 pro</v-card-title>
                <v-card-subtitle class="body-1">Multi obstacle avoidance sensor UAV</v-card-subtitle>
              </div>
              <v-avatar class="ma-3" size="300" tile>
                <v-img src="../assets/2.jpg"></v-img>
              </v-avatar>
            </div>
          </v-card>
        </v-col>

        <v-col :cols="12" class="mt-2">
          <v-card>
            <div class="d-flex flex-no-wrap justify-space-between align-center">
              <div>
                <v-card-title class="headline">Maicv mini</v-card-title>
                <v-card-subtitle class="body-1">Entry-level drone</v-card-subtitle>
              </div>
              <v-avatar class="ma-3" size="300" tile>
                <v-img src="../assets/3.jpg"></v-img>
              </v-avatar>
            </div>
          </v-card>
        </v-col>

        <v-col :cols="12" class="mt-2">
          <v-card>
            <div class="d-flex flex-no-wrap justify-space-between align-center">
              <div>
                <v-card-title class="headline">Phantom 4 pro</v-card-title>
                <v-card-subtitle class="body-1">Intelligent control drone</v-card-subtitle>
              </div>
              <v-avatar class="ma-3" size="300" tile>
                <v-img src="../assets/4.jpg"></v-img>
              </v-avatar>
            </div>
          </v-card>
        </v-col>

        <v-col :cols="12" class="mt-2">
          <v-card>
            <p>In the face of consumers, we have two series of Phantom and Mavic products。Phantom Series， we have developed four generations, our latest model is Phantom 4 Pro+. And the Mavic series, We have also developed seven products.</p>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: [
        "https://i.loli.net/2020/06/22/9KJ1sRkwvNV2Yxa.jpg",
        "https://i.loli.net/2020/06/22/yId7DYkuQngwzFj.jpg",
        "https://i.loli.net/2020/06/22/TDhjMW12VOzPgmY.jpg"
      ]
    };
  }
};
</script>